<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style='color:blue;text-align:center;'>Dashboard 加载成功</div>
  <div class="dashboard">
    <el-row :gutter="24">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">客户总数</div>
          <div class="stat-value">{{ stats.customerCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">业务总数</div>
          <div class="stat-value">{{ stats.businessCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">工单总数</div>
          <div class="stat-value">{{ stats.workorderCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">本月新增客户</div>
          <div class="stat-value">{{ stats.monthlyNew }}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top:32px;">
      <el-col :span="12">
        <el-card>
          <template #header>最近新增客户</template>
          <el-table :data="recentCustomers" size="small" style="width:100%" v-loading="loading">
            <el-table-column prop="customerName" label="客户名称" />
            <el-table-column prop="contactPhone" label="联系电话" />
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>待处理工单</template>
          <el-table :data="pendingWorkorders" size="small" style="width:100%" v-loading="loading">
            <el-table-column prop="orderNumber" label="工单编号" width="100" />
            <el-table-column prop="customerName" label="客户" width="120" />
            <el-table-column prop="businessName" label="业务" width="120" />
            <el-table-column prop="description" label="工单描述" />
            <el-table-column prop="priority" label="优先级" width="80">
              <template #default="{row}">
                <el-tag :type="priorityTag(row.priority)" size="small">{{ priorityText(row.priority) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="状态" />
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCustomers, getMonthlyNewCustomers } from '@/api/customer'
import { getBusinesses } from '@/api/business'
import { getWorkorders } from '@/api/workorder'
import { formatDateTime } from '@/utils/dateFormat'
import { ElMessage } from 'element-plus'

const stats = ref({
  customerCount: 0,
  businessCount: 0,
  workorderCount: 0,
  monthlyNew: 0
})
const recentCustomers = ref([])
const pendingWorkorders = ref([])
const loading = ref(false)

const loadDashboard = async () => {
  loading.value = true
  try {
    // 客户统计
    const customerRes = await getCustomers({ page: 1, limit: 1 })
    stats.value.customerCount = customerRes.total || 0
    
    // 业务统计
    const businessRes = await getBusinesses({ page: 1, limit: 1 })
    stats.value.businessCount = businessRes.total || 0
    
    // 工单统计
    const workorderRes = await getWorkorders({ page: 1, limit: 1 })
    stats.value.workorderCount = workorderRes.total || 0
    
    // 本月新增客户
    const monthlyRes = await getMonthlyNewCustomers()
    if (monthlyRes.success) {
      stats.value.monthlyNew = monthlyRes.monthlyNewCount || 0
    } else {
      console.error('获取本月新增客户失败:', monthlyRes.message)
      stats.value.monthlyNew = 0
    }
    
    // 最近客户
    const recentRes = await getCustomers({ page: 1, limit: 5 })
    recentCustomers.value = (recentRes.records || []).map(customer => ({
      ...customer,
      createTime: formatDateTime(customer.createTime)
    }))
    
    // 待处理工单
    const pendingRes = await getWorkorders({ page: 1, limit: 5, status: 0 })
    pendingWorkorders.value = (pendingRes.records || []).map(workorder => ({
      ...workorder,
      createTime: formatDateTime(workorder.createTime),
      orderStatus: getStatusText(workorder.orderStatus)
    }))
  } catch (error) {
    console.error('加载仪表盘数据失败:', error)
    ElMessage.error('加载仪表盘数据失败，请刷新页面重试')
  } finally {
    loading.value = false
  }
}

const getStatusText = (status) => {
  switch(status) {
    case 0: return '新建'
    case 1: return '处理中'
    case 2: return '已完成'
    case 3: return '已退回'
    default: return '未知'
  }
}

const priorityTag = (priority) => {
  switch(priority) {
    case 1: return 'danger'
    case 2: return 'warning'
    case 3: return 'info'
    default: return ''
  }
}

const priorityText = (priority) => {
  switch(priority) {
    case 1: return '高'
    case 2: return '中'
    case 3: return '低'
    default: return '未知'
  }
}

onMounted(loadDashboard)
</script>

<style scoped>
.dashboard {
  padding: 32px 16px;
}
.stat-card {
  text-align: center;
  background: linear-gradient(135deg, #2d8cf0 0%, #409eff 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
}
.stat-title {
  font-size: 16px;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 32px;
  font-weight: bold;
}
</style>
